<template>
	<view>
		<view class="c_modal">
			<view class="c_title">个人中心</view>
			<view class="c_top">
				<image src="../../static/account/cow.png" mode="aspectFit"></image>
				<view class="">
					<text class="big">{{ formatUser(USERINFO.account) }}</text>
					<text class="small">UID:{{ filter.getFormattedUid(USERINFO.uid) }}</text>
				</view>
			</view>
			<view class="c_list">
				<view class="c_block" v-if="USERINFO.authLevel == 'LEVEL0'" @click="$goPage('../authentication/authentication')">
					<view class="left">
						<image class="c1" src="../../static/account/c1.png"></image>
						<text>身份认证</text>
					</view>
					<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
				</view>
				<view class="c_block" v-else>
					<view class="left">
						<image class="c1" src="../../static/account/c1.png"></image>
						<text>{{ formText(USERINFO.authLevel, 'real') }}</text>
					</view>
					<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
				</view>
				<view class="c_block" @click="$goPage('../account/securitySetting/securitySetting')">
					<view class="left">
						<image src="../../static/account/c2.png" mode="aspectFit"></image>
						<text>安全中心</text>
					</view>
					<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
				</view>
				<view class="c_block" @click="$goPage('../account/message/message')">
					<view class="left">
						<image src="../../static/account/c3.png" mode="aspectFit"></image>
						<text>消息提醒</text>
					</view>
					<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
				</view>
				<view class="c_block" @click="$goPage('../account/invitation/invitation')">
					<view class="left">
						<image src="../../static/account/c4.png" mode="aspectFit"></image>
						<text>我的邀请</text>
					</view>
					<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
				</view>
				<view class="c_block" @click="$goPage('../c2c/c2cAgent/c2cAgent')">
					<view class="left">
						<image src="../../static/account/c5.png" mode="aspectFit"></image>
						<text>申请商家</text>
					</view>
					<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
				</view>
				<view class="c_block" @click="$goPage('../c2c/c2cReceivable/c2cReceivable')">
					<view class="left">
						<image src="../../static/account/c6.png" mode="aspectFit"></image>
						<text>法币交易</text>
					</view>
					<view class="f_flex">
						<text class="set">设置</text>
						<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
					</view>
				</view>
				<view class="c_block" @click="$goPage('../account/bonus/bonus')">
					<view class="left">
						<image src="../../static/account/c7.png" mode="aspectFit"></image>
						<text>红包</text>
					</view>
					<uni-icons type="arrowright" :color="'#8C9FAD'" size="24"></uni-icons>
				</view>
			</view>
			<view class="c_btn" @click="logout">
				退出账号
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import filter from '@/common/filter.js';
import { REG_EMAIL } from '@/common/reg.js';
import { mapGetters } from 'vuex';
export default {
	name: 'lkex-modal',
	components: { uniIcons },
	props: {},
	data() {
		return {
			filter
		};
	},
	computed: {
		...mapGetters(['USERINFO'])
	},
	methods: {
		hideModal() {
			if (this.isMask) {
				this.$emit('close');
			}
		},
		formText(val, type) {
			if (type == 'real') {
				return val == 'LEVEL1' ? '认证一级' : '认证二级';
			} else if (type == 'nickname') {
				return val ? val : '未设置昵称';
			}
		},
		//格式化显示
		formatUser(val) {
			if (!val) {
				return '';
			}
			let account = val;
			if (REG_EMAIL.test(val)) {
				account = filter.email(val);
			} else {
				account = account[0] == '8' && account[1] == '6' ? filter.phone(account.replace('86', '')) : val;
			}
			return account;
		},
		closes() {
			this.$emit('close');
		},
		//退出登录
		logout() {
			uni.removeStorageSync('LOGIN_TIME');
			uni.removeStorageSync('TOKEN');
			uni.reLaunch({
				url: '../login/login'
			});
		}
	}
};
</script>
<style lang="scss">
.Modal_mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
}
.c_modal {
	z-index: 9999;
	position: fixed;
	width: 440rpx;
	bottom: 0;
	top: 0;
	right: 0;
	border: 2upx solid #b5b5b5;
	background: #fff;
	overflow-y: scroll;
	.c_title {
		height: 88rpx;
		background: #1D2243;
		font-size: 36rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	.c_top {
		display: flex;
		height: 148rpx;
		align-items: center;
		padding-left: 48rpx;
		border-bottom: 12rpx solid #E7EBEE;
		image {
			width: 86upx;
			height: 86upx;
			margin-right: 20rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		view {
			.big {
				font-size: 36rpx;
				display: block;
				margin-bottom: 16rpx;
				font-weight: bold;
			}
			.small {
				color: $gray;
			}
		}
	}
	.c_list {
		.c_block {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx 0 48rpx;
			border-bottom: 2rpx solid #E7EBEE;
			height: 88rpx;
			.set {
				font-size: 32rpx;
				color: #C5CFD5;
			}
			.f_flex {
				display: flex;
				align-items: center;
			}
			.left {
				display: flex;
				align-items: center;
				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 18rpx;
				}
				text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}			
		}
	}
	.c_btn {
		width:380rpx;
		height:66rpx;
		background:rgba(24,130,212,1);
		border-radius:6rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 50rpx auto 24rpx;
		font-weight: bold;
	}
}
</style>
